<template>
  <view class="min-h-screen bg-[#f0f0f0] pb-4">
    <!-- 顶部图片区域 -->
    <image
      class="w-full h-96 object-cover"
      src="@/assets/imgs/shan.png"
      mode="aspectFill"
    ></image>

    <image
      class="w-full h-[500rpx] object-cover absolute left-0 top-40 z-20"
      src="@/assets/imgs/shui.png"
      mode="aspectFill"
    ></image>

    <!-- 内容卡片 -->
    <view
      class="w-[660rpx] mx-auto p-4 bg-white mt-[-172px] rounded-xl shadow-lg relative z-10 mb-10"
    >
      <!-- 功德水来源 -->
      <view
        class="flex items-center h-[72rpx] bg-[var(--color-m1)] rounded-[8rpx] mb-4"
      >
        <view class="bg-[#fff] h-full w-1 mx-8"></view>
        <view class="text-[32rpx] text-[var(--color-m2)]">功德水来源</view>
      </view>
      <view class="text-gray-800 text-base mb-8">
        相传有一位菩萨在悬崖上挖了八个坑，每个坑里都有清澈甘甜的水。这八个坑分别代表着八种功德，包括布施、持戒、忍辱、精进、禅定、智慧、方便和般若。这些功德就像水一样，滋润着人们的心灵，给予人们福利和幸福
      </view>

      <view class="flex items-center justify-center mx-auto w-[240rpx] h-[72rpx] relative z-10 border-x-8 border-[var(--color-m1)] bg-[var(--color-m1)] text-[32rpx] text-[var(--color-m2)]">科学原理</view>
     
      <view class="flex flex-col space-y-2 py-[50rpx] px-4 text-gray-800 text-base border border-[var(--color-m1)] mt-[-36rpx]">
        <view class="flex items-start">
          <text class="mr-2 text-[var(--color-m1)]">✔</text>
          <text
            >甘美：水的甘甜可能与水中的矿物质和微量元素有关，这些成分可以影响水的味道。</text
          >
        </view>
        <view class="flex items-start">
          <text class="mr-2 text-[var(--color-m1)]">✔</text>
          <text
            >清冷：水温的变化可以通过自然界的热传导和对流现象来解释。例如，地下水由于地热的影响，可能会有温度变化。</text
          >
        </view>
        <view class="flex items-start">
          <text class="mr-2 text-[var(--color-m1)]">✔</text>
          <text
            >轻柔：水的轻柔感可能与水的表面张力和粘度有关。某些条件下，水的表面张力会降低，使其感觉更加轻柔。</text
          >
        </view>
        <view class="flex items-start">
          <text class="mr-2 text-[var(--color-m1)]">✔</text>
          <text>洁净：自然界中的水通过过滤、沉淀和微生物分解而变得洁净。</text>
        </view>
        <view class="flex items-start">
          <text class="mr-2 text-[var(--color-m1)]">✔</text>
          <text
            >润泽：水的润泽感可能与水分子的极性有关，水分子能够很好地与其他物质结合，从而产生润泽感。</text
          >
        </view>
        <view class="flex items-start">
          <text class="mr-2 text-[var(--color-m1)]">✔</text>
          <text
            >安和：水的平静状态可以通过物理上的静水压力和流体力学来解释。静止的水通常会给人一种平和的感觉。</text
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 模拟数据
const principles = [
  {
    id: 1,
    title: "甘美",
    description:
      "水的甘甜可能与水中的矿物质和微量元素有关，这些成分可以影响水的味道。",
  },
  {
    id: 2,
    title: "清冷",
    description:
      "水温的变化可以通过自然界的热传导和对流现象来解释。例如，地下水由于地热的影响，可能会有温度变化。",
  },
  {
    id: 3,
    title: "轻柔",
    description:
      "水的轻柔感可能与水的表面张力和粘度有关。某些条件下，水的表面张力会降低，使其感觉更加轻柔。",
  },
  {
    id: 4,
    title: "洁净",
    description: "自然界中的水通过过滤、沉淀和微生物分解而变得洁净。",
  },
  {
    id: 5,
    title: "润泽",
    description:
      "水的润泽感可能与水分子的极性有关，水分子能够很好地与其他物质结合，从而产生润泽感。",
  },
  {
    id: 6,
    title: "安和",
    description:
      "水的平静状态可以通过物理上的静水压力和流体力学来解释。静止的水通常会给人一种平和的感觉。",
  },
];
</script>

<style scoped>
/* 自定义样式 */
</style>
